<template>
	<div class="resource_table">
		<el-table size="medium" ref="table" :data="resourceListData" height="100%" @select="handleTableSelect" @row-contextmenu="handleContextMenu">
			<el-table-column type="selection" width="42"></el-table-column>
			<el-table-column prop="date" label="文件名" min-width="300">
				<template slot-scope="{ row }">
					<div class="title" @click="handleToDetail(row)">
						<template v-if="row.showType === 1">
							<img :src="row | fileTypeIcon" />
						</template>
						<template v-else>
							<svg-icon :icon-name="row | fileTypeIcon" size="40"></svg-icon>
						</template>
						<h4>
							{{ row.oldName }}
							<i class="link el-icon-link" v-if="row.isLocal === 2"></i>
							<i class="collect el-icon-star-on" v-if="row.isCollect === 1"></i>
						</h4>
					</div>
				</template>
			</el-table-column>
			<el-table-column label="资源状态" min-width="100">
				<template slot-scope="{ row }">
					<template v-if="row.isFolder !== 1">
						<el-tag size="small" disable-transitions effect="plain" :type="row | resourceFilterType">{{ row | resourceFilterText }}</el-tag>
					</template>
				</template>
			</el-table-column>
			<el-table-column prop="name" label="大小" min-width="80">
				<template slot-scope="{ row }">
					<template v-if="row.isFolder !== 1">
						{{ row.attrSize | sizeFilter }}
					</template>
				</template>
			</el-table-column>
			<el-table-column prop="createName" label="创建者" min-width="80"></el-table-column>
			<el-table-column prop="updateTime" label="更新时间" width="160"></el-table-column>
		</el-table>
	</div>
</template>

<script>
import resourceMixin from '../mixins/resource';
import contextMenuMixin from '../mixins/contextMenu';
export default {
	mixins: [resourceMixin, contextMenuMixin],
	data() {
		return {};
	},
	filters: {
		auditFilter(input) {
			if (input === 1) {
				return '已通过';
			} else if (input === 2) {
				return '待检测';
			} else if (input === 3) {
				return '不通过';
			} else if (input === 4) {
				return '审核中';
			} else {
				return '--';
			}
		},
		transcodeFilter(input) {
			if (input === 1) {
				return '转码成功';
			} else if (input === 2) {
				return '转码中';
			} else if (input === 3) {
				return '转码失败';
			}
		}
	},
	watch: {
		checkedResource(arr) {
			this.$emit('input', arr);
			this.$nextTick(() => {
				this.$refs['table'].clearSelection();
				arr.forEach((item) => {
					let info = this.data.find((n) => n.id === item);
					this.$refs['table'].toggleRowSelection(info, true);
				});
			});
		}
	},
	methods: {
		handleTableSelect(data) {
			console.log(data);
			// this.checkedResource = data.map((item) => item.id);
		}
	}
};
</script>

<style lang="scss" scoped>
.resource_table::v-deep {
	width: 100%;
	height: calc(100% - 6px);
	margin-top: 6px;
	.el-table__header-wrapper {
		th {
			background-color: #f2f6fc;
		}
		.el-checkbox {
			display: none;
		}
	}
	.el-table__body .cell {
		display: flex;
		line-height: 1;
	}
	.el-table__cell {
		cursor: pointer;
	}
	.title {
		display: inline-flex;
		align-items: center;
		cursor: pointer;
		font-size: 0;
		img,
		svg {
			display: block;
			object-fit: contain;
			margin-right: 10px;
		}
		img {
			width: 40px;
			height: 40px;
			border-radius: 4px;
			object-fit: cover;
		}
		h4 {
			display: -webkit-box;
			/* 必须设置此项才能生效 */
			-webkit-line-clamp: 2;
			/* 限制最大行数 */
			-webkit-box-orient: vertical;
			/* 垂直布局 */
			overflow: hidden;
			/* 超出部分隐藏 */
			text-overflow: ellipsis;
			/* 显示省略号 */
			font-size: 14px;
			font-weight: normal;
			max-height: 40px;
			line-height: 20px;
		}
		i {
			font-size: 16px;
			&.link {
				color: #67c23a;
			}
			&.collect {
				color: #e6a23c;
			}
		}
	}
}
</style>
